<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">一次就好</button>
    <script>
      //一次函数，时间执行通过返回函数来执行
      var btn = document.getElementById('btn');
      function once(fn){
        var flag = false  //默认没有执行
            return function(){
                if(!flag){
                    flag = true; 
                    fn.apply(this,arguments)
                }
            }
      }
      btn.onclick = once(
        function (event) {
        console.log('haha');
        console.log(this)
        console.log(event)
      }
      )

      //原理 ：1、点击事件的函数被当成返回函数调用，fn=function (event)
      //点击事件  btn.onclick = function(){
                // if(!flag){
                //     flag = true; 
                //     fn()
                // }
             //   2、当被反击的时候执行返回函数，闭包原理，子函数保存了父元素的标识符，
            // 3、判断flag ，取反为true，执行，然后修改flag值，调用fn()
           //关于this指向问题 ,B包会修改函数指向问题，fn()没有调用者，默认为全局调用，this指向window,
           //1、修改this指向，可以通过call - apply - bind 修改
           //2、同样event也会被修改，传入的实参可以用arguments伪数组来接受
    </script>
  </body>
</html>
